<!DOCTYPE html>
<html>
<head>
    <title>饮食管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="木兰湾管理系统">
    <script type="text/javascript" src="../../static/include/header-css.js"></script>
    <!--tag 编辑-->
    <link rel="stylesheet" href="../../static/css/jquery.tag-editor.css">
</head>
<body>
<div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" id="search-form">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" name="name" required="" >
            <a href="javascript:searchData();" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
        </label>
        <input type="hidden" name='page' value="1" id="page"/>
        <input type="hidden" name='dietType' value="" id="dietType"/>
    </form>
    <a href="javascript:searchData()" class="mulanbay-search-btn" id="searchData">搜索</a>
</div>
<!--分类-->
<div class="weui-tab" style="height:44px;"   id="dietTypeTab">
    <div class="weui-tab-nav">
        <a href="javascript:getDataByType(null);" class="weui-navbar__item weui-nav-green"> 全部 </a>
        <a href="javascript:getDataByType('BREAKFAST');" class="weui-navbar__item weui-nav-green"> 早餐</a>
        <a href="javascript:getDataByType('LUNCH');" class="weui-navbar__item weui-nav-green"> 午餐</a>
        <a href="javascript:getDataByType('DINNER');" class="weui-navbar__item weui-nav-green"> 晚餐</a>

    </div>
</div>
<!--列表数据显示-->
<div id="dataContent"></div>
<!--滚动加载-->
<div class="weui-loadmore" id="loadingSpan">
    <span class="weui-loadmore__tips">加载中...</span>
</div>
<!--编辑页面-->
<div id="edit-popup" class='weui-popup__container'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <a href="javascript:;" class="picker-button close-popup">关闭</a>
                <h1 class="title">饮食信息</h1>
            </div>
        </div>
        <div class="modal-content">
            <div class="white_bg">
                <form id="edit-form">
                    <div class="weui-cell mulanbay_select-before">
                        <div class="weui-cell__hd"><label class="weui-label">餐次<span class="mulanbay-notNull">*</span></label></div>
                        <div class="weui-cell__bd">
                            <div id="dietTypeList"></div>
                        </div>
                    </div>
                    <div class="weui-cell mulanbay_select-before">
                        <div class="weui-cell__hd"><label class="weui-label">来源<span class="mulanbay-notNull">*</span></label></div>
                        <div class="weui-cell__bd">
                            <div id="dietSourceList"></div>
                        </div>
                    </div>
                    <div class="weui-cells__title"><span class='mulanbay_textarea_title'><a href="javascript:showDietEditTag('foods','/diet/getFoodsTree','后期可根据不同食物统计','FOODS');">食物<img src="../../static/image/tag.png"></a></span><span class="mulanbay-notNull">*</span></div>
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="tag" placeholder="每输入一个按回车" name="foods" id="foods">
                            </div>
                        </div>
                    </div>
                    <div class="weui-cell mulanbay_select-before">
                        <div class="weui-cell__hd"><label class="weui-label">食物类型<span class="mulanbay-notNull">*</span></label></div>
                        <div class="weui-cell__bd">
                            <div id="foodTypeList"></div>
                        </div>
                    </div>
                    <div class="weui-cell mulanbay_select-before">
                        <div class="weui-cell__hd"><label class="weui-label">发生时间<span class="mulanbay-notNull">*</span></label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" id='occurTime' name="occurTime" type="text" value="">
                        </div>
                    </div>
                    <div class="weui-cells__title" align="center"><<<--更多选项-->>></div>
                    <div class="weui-cell mulanbay_select-before">
                        <div class="weui-cell__hd">
                            <label class="weui-label">地点</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" placeholder="" name="location">
                        </div>
                    </div>
                    <div class="weui-cell mulanbay_select-before">
                        <div class="weui-cell__hd"><label class="weui-label">价格</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="number" placeholder="单位:元" name="price">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p>评分(0-5)<span class="mulanbay-notNull">*</span></p>
                        </div>
                        <div class="weui-cell__ft">
                            <div class="weui-rater">
                                <a data-score = "1"> <span >★</span> </a>
                                <a data-score = "2"> <span >★</span> </a>
                                <a data-score = "3"> <span >★</span> </a>
                                <a data-score = "4"> <span >★</span> </a>
                                <a data-score = "5"> <span >★</span> </a>
                            </div>
                        </div>
                        <div class="weui-cell__hd">
                            <a href="javascript:showScoreDesc();"><img src="../../static/image/help.png" alt="说明"></img></a>
                        </div>
                    </div>

                    <div class="weui-cells__title"><span class='mulanbay_textarea_title'><a href="javascript:showDietEditTag('tags','/diet/getTagsTree','可以是菜的菜名或者节日的名称','FOODS_TAG');">标签<img src="../../static/image/tag.png"></a></span></div>
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="tag" placeholder="每输入一个按回车" name="tags" id="tags">
                            </div>
                        </div>
                    </div>
                    <div class="weui-cells__title"><span class='mulanbay_textarea_title'><a href="javascript:showDietEditTag('shop','/diet/getShopTree','店铺名或者其品牌名','SHOP_BRAND');">店铺/品牌<img src="../../static/image/tag.png"></a></span></div>
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="tag" placeholder="每输入一个按回车" name="shop" id="shop">
                            </div>
                        </div>
                    </div>
                    <div class="weui-cells__title"><span class='mulanbay_textarea_title'>备注</span></div>
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <textarea class="weui-textarea" placeholder="" rows="2" name="remark"></textarea>
                                <div class="weui-textarea-counter"><span>0</span>/200</div>
                            </div>
                        </div>
                    </div>
                    <input type="text" style="display:none;" name='score' id="score" value=""/>
                    <input type="text" style="display:none;" name='id' id="id" value=""/>
                </form>
            </div>
            <br>
            <br>
            <a href="javascript:saveData();" class="weui-btn weui-btn_primary weui-footer_fixed-bottom"><label id="edit-button-name">保存</label></a>
        </div>
    </div>
</div>

<!--TAG编辑页面-->
<div id="edit-tag-popup" class='weui-popup__container'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <a href="javascript:$.openPopup('#edit-popup');" class="picker-button close-popup">关闭</a>
                <h1 class="title">标签信息</h1>
            </div>
        </div>
        <div class="modal-content">
            <div class="white_bg">
                <form id="edit-tag-form">
                    <div class="page-hd">
                        <div class="weui-cells__title"><span class='mulanbay_textarea_title'><label id="tagDesc"></label></span><span class="mulanbay-notNull">*</span></div>
                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cell">
                                <div class="weui-cell__bd">
                                    <input class="weui-input" type="tag-editor-tag" placeholder="每输入一个按回车" name="commonTag" id="commonTag">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page-bd-15">
                        <div class="weui-label-list">
                            *我的常用：
                            <div id="userTagList"></div>
                            <br><br>
                            *系统推荐：
                            <div id="systemTagList"></div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <input type="text" style="display:none;" name='fromEditTagId' id="fromEditTagId" value=""/>
                </form>
            </div>
            <br>
            <br>
            <a href="javascript:saveDietEditTag();" class="weui-btn weui-btn_primary weui-footer_fixed-bottom"><label id="edit-tag-button-name">确定</label></a>
        </div>
    </div>
</div>

<br>
<a href="javascript:showAdd();" class="weui-btn weui-btn_primary weui-footer_fixed-bottom">新增</a>
<script type="text/javascript" src="../../static/include/footer-js.js"></script>
<!--tag 编辑-->
<script type="text/javascript" src="../../static/js/jquery.tag-editor.min.js"></script>
<script type="text/javascript" src="../../static/js/jquery.caret.min.js"></script>
<!--顶部导航使用-->
<script type="text/javascript" src="../../static/js/iscroll-lite.min.js"></script>
<script>
    $(function() {
        pushRefresh(getData);
        datetimePicker('occurTime',null);
        //因为是静态的，所有只要加载一次
        initForm(true);
        initTagEdit(['foods','tags','shop']);
        initRating();
        $('#dietTypeTab').tab({defaultIndex:0,activeClass:"bg-green"});
        getData();
        pushStateListener();
    });
    function getDataByType(type) {
        $('#dietType').val(type);
        getData();
    }
    function initRating() {
        $(".weui-rater a").click(function(){
            var index = $(this).index();  //当前点击
            for(var i = 0;i <= index;i++){
                $(".weui-rater a").eq(i).addClass('on');
            }
            for(var j = index; j <=5;j++){
                $(".weui-rater a").eq(j).removeClass('on');
            }
            $(this).addClass('on');
            $("#score").val($(this).data('score'));
        });
    }
    function loadRating(score) {
        for(var i = 0;i < score;i++){
            $(".weui-rater a").eq(i).addClass('on');
        }
    }
    function showDietEditTag(fromId,url,desc,systemTagCode) {
        $('#fromEditTagId').val(fromId);
        showEditTag(fromId,url,systemTagCode);
        setElementInnerHTML('tagDesc',desc);
    }
    function saveDietEditTag() {
        var fromId = $('#fromEditTagId').val();
        saveEditTag(fromId);
    }
    function clearEditForm() {
        clearForm("edit-form");
        removeTag(['foods','tags','shop']);
    }
    function showAdd() {
        $.openPopup('#edit-popup') ;
        clearEditForm();
        var url='/diet/getLastLocation';
        doAjax(null,url,'GET',false,function(data){
            var nowDate =getNowDateTimeString();
            var formData = {
                dietType: 'BREAKFAST',
                dietSource: 'SELF_MADE',
                price:0,
                location:data,
                score:3,
                occurTime:nowDate
            };
            $('#edit-form').loadJson(formData);
            loadRating(3);
        });
        setElementInnerHTML('edit-button-name','增加');
    }
    function showAddFromTmp(id) {
        $.openPopup('#edit-popup') ;
        clearEditForm();
        var url='/diet/get?id='+ id;
        doAjax(null,url,'GET',false,function(data){
            var dd = new Date();
            var bt = dd.Format('yyyy-MM-dd hh:mm:ss');
            data.occurTime=bt;
            data.id=null;
            $('#edit-form').loadJson(data);
            loadRating(data.score);
        });
        setElementInnerHTML('edit-button-name','增加');
    }
    function showEdit(id) {
        $.openPopup('#edit-popup') ;
        clearEditForm();
        var url='/diet/get?id='+ id;
        doAjax(null,url,'GET',false,function(data){
            $('#edit-form').loadJson(data);
            loadRating(data.score);
        });
        setElementInnerHTML('edit-button-name','修改');
    }
    function showDelete(id) {
        var delUrlPrefix = '/diet/delete';
        commonDeleteByIds(delUrlPrefix,id,function () {
            //searchData();
            //直接把该节点删除
            setElementInnerHTML(getDivId(id),'');
        });
    }
    function saveData() {
        var postData = form2Json("edit-form");
        var create=false;
        var url='/diet/edit';
        if($("#id").val()==null||$("#id").val()==''){
            url='/diet/create';
            create=true;
        }
        doFormSubmit(postData,url,function(data){
            $.closePopup('#edit-popup') ;
            if(create){
                getData();
                gotoTop();
            }else {
                var hh = createRow(data);
                setElementInnerHTML(getDivId(data.id),hh);
            }
        });
    }
    function showScoreDesc() {
        var msg="评分范围0-5，代表食物的质量，方便后期的饮食跟踪分析，比如哪些食物会引起个人的不适<br>";
        msg+="*5为最高等级，说明该食物对自己非常的有用<br>";
        msg+="*4为表示该食物比较不错，有些惊喜<br>";
        msg+="*3为默认值，表示该食物一般般<br>";
        msg+="*2表示该食物稍微引起自己不适<br>";
        msg+="*1表示该食物严重引起个人不适<br>";
        msg+="*0表示该食物不能食用<br>";
        showInfoMsg(msg);
    }
    function initForm(async) {
        loadDietTypeList(async);
        loadDietSourceList(async);
        loadFoodTypeList(async);
    }
    function loadDietTypeList(async){
        var url='/common/getEnumTree?enumClass=DietType';
        loadSelectListNormal(url,'dietTypeList','dietType','dietType',true,async,null);
    }
    function loadDietSourceList(async){
        var url='/common/getEnumTree?enumClass=DietSource';
        loadSelectListNormal(url,'dietSourceList','dietSource','dietSource',true,async,null);
    }
    function loadFoodTypeList(async){
        var url='/common/getEnumTree?enumClass=FoodType';
        loadSelectListNormal(url,'foodTypeList','foodType','foodType',true,async,null);
    }
    function searchData() {
        setPage(1);
        getData();
    }
    function getData() {
        var url = '/diet/getData';
        loadListData('search-form','dataContent','page',url,createRow,null);
    }
    function getDivId(id) {
        return 'Diet'+id;
    }
    function createRow(rowData) {
        var html='';
        html+='<div id="'+getDivId(rowData.id)+'">';
        html+='<div class="weui-form-preview">';
        html+='    <a class="weui-cell  weui-cell_access weui-cell_example" href="javascript:showEdit('+rowData.id+');">\n';
        // 后期根据餐次类型来显示
        var pr =rowData.dietType.toLowerCase();
        var pic = '<img src="../../static/image/'+pr+'.png">';
        html+='        <div class="weui-cell__hd">'+pic+'</div>\n';
        html+='        <div class="weui-cell__bd">\n';
        html+='<label class="weui-form-preview__label">'+rowData.occurTime+'</label>';
        html+='        </div>\n';
        var ss ='评分:'+rowData.score+',¥'+rowData.price;
        html+='        <div class="weui-cell__ft">'+ss+'</div>\n';
        html+='    </a>\n';
        html+='    <div class="weui-form-preview__bd">\n';
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">餐次</label>\n';
        var dn = rowData.dietTypeName+'('+rowData.foodTypeName+')';
        html+='            <span class="weui-form-preview__value">'+dn+'</span>\n';
        html+='        </div>\n';
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">来源</label>\n';
        html+='            <span class="weui-form-preview__value">'+rowData.dietSourceName+'</span>\n';
        html+='        </div>\n';
        html+='        <div class="weui-form-preview__item">\n';
        html+='            <label class="weui-form-preview__label">食物</label>\n';
        var foods = rowData.foods;
        if(rowData.score<3){
            foods = '<font color="red">'+rowData.foods+'</font>';
        }
        html+='            <span class="weui-form-preview__value mulanbay-dark-font">'+foods+'</span>\n';
        html+='        </div>\n';
        html+='    </div>\n';
        html+='    <div class="weui-form-preview__ft ">\n';
        html+='        <a class="weui-form-preview__btn weui-form-preview__btn_default " href="javascript:showAddFromTmp('+rowData.id+');">以此为模板</a>\n';
        html+='        <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_delete" onclick="javascript:showDelete('+rowData.id+');">删除</button>\n';
        html+='    </div>\n';
        html+='</div>\n';
        html+='</div>\n';
        html+='<br>\n';
        return html;
    }
</script>
</body>
</html>